<template>
  <div class="login">
    <img class="login-logo" src="@/assets/imgs/logo.png" alt="" />
    <div class="login-content">
      <div class="login-content__left"></div>
      <div class="login-content__right">
        <div class="login-title">用户登录</div>
        <el-alert
          v-show="isLoginFailed"
          class="login-error"
          type="error"
          :title="loginFailedMsg"
          banner
          closable
        />
        <div id="loginForm">
          <el-form class="login-form" ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item class="login-username" label="" prop="username">
              <div id="username" style="width: 100%">
                <el-input
                  v-model.trim="ruleForm.username"
                  clearable
                  size="large"
                  name="username"
                  placeholder="请输入您的用户名"
                  @keyup.enter="submitForm(ruleFormRef)"
                >
                  <template #prefix>
                    <i class="font_family icon-yonghuming"></i>
                  </template>
                </el-input>
              </div>
            </el-form-item>

            <el-form-item class="login-password" label="" prop="password">
              <div id="password" style="width: 100%">
                <el-input
                  v-model.trim="ruleForm.password"
                  type="password"
                  show-password
                  clearable
                  size="large"
                  name="password"
                  placeholder="请输入您的密码"
                  @keyup.enter="submitForm(ruleFormRef)"
                >
                  <template #prefix>
                    <i class="font_family icon-mima"></i>
                    <!-- <LockOutlined class="site-form-item-icon" /> -->
                  </template>
                </el-input>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button
                id="loginBtn"
                class="login-btn"
                type="primary"
                @click="submitForm(ruleFormRef)"
                size="large"
                :loading="loadingSubmit"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="login-copyright">
      Copyright @ 2018.HWABAO Trust Co.Ltd.,All Rights Reserved 版权所有 | @
      2018.华宝信托有限责任公司
    </div>
  </div>
</template>
<script lang="ts" setup>
interface RuleForm {
  username: string
  password: string
}

import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { Base64 } from 'js-base64'
import { initDynamicRouter } from '@/router/modules/dynamicRouter'
import { useTabsStore } from '@/store/modules/tabs'
import { useKeepAliveStore } from '@/store/modules/keepAlive'
import { LOGIN_CODE_EXTRA } from '@/config'

const router = useRouter()
const tabStore = useTabsStore()
const keepAliveStore = useKeepAliveStore()
const userStore = useUserStore()

const isLoginFailed = ref(false)
const loadingSubmit = ref(false)
const loginFailedMsg = ref('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  username: '',
  password: '',
})
const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: '请输入用户名!', trigger: 'blur' }],
  password: [
    {
      required: true,
      message: '请输入密码!',
      trigger: 'change',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      onFinish()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const loginSuccessCallBack = async (path) => {
  await initDynamicRouter()
  tabStore.closeMultipleTab()
  keepAliveStore.setKeepAliveName()
  router.push({ path })
}

const onFinish = () => {
  isLoginFailed.value = false
  loadingSubmit.value = true

  const obj = { loginName: ruleForm.username, password: Base64.encode(ruleForm.password) }
  userStore
    .Login(obj)
    .then(async (res: any) => {
      // 登陆成功
      if (res.success) {
        loginSuccessCallBack('/index')
      }
    })
    .catch(async (error) => {
      let item = LOGIN_CODE_EXTRA.find((e) => e.code === error.code)
      if (item !== undefined) {
        loadingSubmit.value = false
        loginSuccessCallBack(item.path)
        // 登陆成功后需要跳转特定页面
      } else {
        loginFailedMsg.value = error.message || '登录错误，请联系管理员！'
        // 登陆失败
        isLoginFailed.value = true
        loadingSubmit.value = false
      }
    })
}
</script>
<style lang="less" scoped>
.login {
  background-image: url('~@/assets/imgs/login-bg1.png');
  background-size: cover; /* 或者使用 contain */
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0;
  .login-logo {
    position: absolute;
    width: 137px;
    top: 46px;
    left: 60px;
  }
  .login-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    .login-content__left {
    }
    .login-content__right {
      width: 520px;
      background: #fff;
      position: relative;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 0 85px;
      .login-title {
        color: #333;
        font-weight: bold;
        font-size: 28px;
        text-align: center;
        margin-bottom: 73px;
      }
      .login-error {
        margin-bottom: 18px;
      }
      .login-username {
        margin-bottom: 26px;
        width: 100%;
      }
      .login-password {
        margin-bottom: 74px;
        width: 100%;
      }
      .login-btn {
        width: 100%;
        background-color: #be0028;
      }
      :v-deep(.ant-form-item-explain-error) {
        font-size: 12px;
      }
    }
  }
  .login-copyright {
    position: absolute;
    left: 120px;
    bottom: 27px;
    height: 20px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 20px;
  }
}
</style>
